// 1、【准备】打开网页创建【网页顶部加载进度条】进度100%；
// 2、【定时器】定义num变量默认0，每隔10ms ++ 作为【网页顶部加载进度条】进度
// 3、【判断】如果【网页顶部加载进度条】已存在直接修改【进度】无需重复创建
// 4、【判断】进度100%  也就是 【num>=100】则【1-移除DOM】【2-清除定时器】
// 5、【优化1】网页未加载完毕，暂停操作进度条
// 6、【优化2】网页右上角增加一个旋转盒模型

       //追加指示 并加过滤，防止重复追加
       //最后移出追加
var over=false
var num=0
var t=setInterval(function(){
    //over==false且num>=90时 才会停止定时器 停止指示条运行 等待加载完成后over==ture时，if失效，又继续
    if(num>=90 && !over) return
    num++
    var nprogress = document.querySelector('.nprogress')
    if(nprogress){
        nprogress.style.width=num+'%'
    }else{
        var nprogress=document.createElement('div')
        nprogress.className='nprogress'
        nprogress.style.width=num+'%'
        nprogress.style.height='5px'
        nprogress.style.top='0'
        nprogress.style.backgroundColor='#29d'
        nprogress.style.position='fixed'
        document.body.appendChild(nprogress)

        //增加加载小圈圈
        var nprogressRadius = document.createElement('div')
        nprogressRadius.className = 'nprogressRadius'
        document.body.appendChild(nprogressRadius)
    }
        //移除进度条
    if(num>110){
        document.body.removeChild(nprogress)
        document.body.removeChild(document.body.querySelector('.nprogressRadius'))
        clearInterval(t)
    }

},10)
//网页加载完毕，执行over去取反
window.addEventListener('load', function(){
    over = true
})

